<template>
  <div class="installment-bill">
    <div class="bank-card-box">
      <div class="item">
        <div class="card-head__logo">
          <img src="@icon/logo-g.png" alt="" />
        </div>
        <span class="span-text">6666****8888</span>
      </div>
    </div>
    <div class="line-box"></div>
    <div class="happen-bill-box">
      <div class="installment-box">
        <div class="installment-item">
          <div class="item-box">
            <div class="divs item-left">{{ paymentUser.leftValue }}</div>
            <div class="divs item-right">
              <p>{{ paymentUser.rightValue }}</p>
              <div class="card-right__logo">
                <img src="@icon/arrow-b.png" alt="" />
              </div>
            </div>
          </div>
          <div class="balance-box">账户余额￥{{ paymentUser.balance }}</div>
        </div>
        <div class="line-box"></div>

        <div class="installment-item" v-for="item in installmentList">
          <div class="item-box">
            <div>{{ item.leftValue }}</div>
            <div class="item-right right-text">
              <p>{{ item.rightValue }}</p>
              <p class="discount-box" v-if="item.discount">
                {{ `手续费${item.discount}折` }}
              </p>
              <div class="card-right__logo" v-if="item.showRightImg">
                <img src="@icon/arrow-b.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="protocol-box">
          <div>
            <van-checkbox
              v-model="checked"
              checked-color="#00B893"
            ></van-checkbox>
          </div>
          <div style="margin-left: 16px;">
            我已阅读并同意遵守
            <span style="color: #00B893;"
              >《中国农业银行金穗贷记卡账单分期业务条款及细则》</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="staging-box">立即分期</div>
  </div>
</template>

<script>
import { globalMethods } from '../common/mixins.js'

export default {
  name: 'happenBill',
  mixins: [globalMethods],

  data() {
    return {
      value: '',
      paymentUser: {
        leftValue: '分期类型',
        rightValue: '6666****8888',
        showRightImg: true,
        balance: '6,289.02',
        discount: null,
      },
      installmentList: [
        {
          leftValue: '分期金额',
          rightValue: '2021-01-22',
          discount: null,
          showRightImg: false,
        },
        {
          leftValue: '分期期数',
          rightValue: '2021-01-22',
          discount: 8,
          showRightImg: true,
        },
        {
          leftValue: '每期应还',
          rightValue: '2021-01-22',
          discount: null,
          showRightImg: true,
        },
      ],
      checked: false,
    }
  },

  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
  },
}
</script>

<style lang="stylus" scoped>
/deep/ .van-cell__right-icon
  margin-left 16px

/deep/ .van-cell
  align-items center

/deep/ .van-tab
  border-bottom 2px solid #E6E6E6
  font-size 32px

/deep/ .van-tabs__line
  background #00B893
  width: 126px;

/deep/ .van-tab--active
  color #00B893

.installment-bill
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  padding-bottom 88px

  .bank-card-box
    position relative
    z-index 1000
    background #fff

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

  img
    width 100%
    height 100%

  .img2
    width 22px
    height 16px

.line-box
    height 20px
    background #F7F7F7

  .bill-box
    background #fff

  .happen-bill-box
    background #fff


    .installment-box
      display flex
      flex-direction column

      .installment-item
        font-size 32px
        min-height 90px
        padding 0 30px
        color #333

        .item-box
          height 90px
          display flex
          justify-content space-between
          align-items center
          border-bottom 1px solid #E6E6E6
          .item-right
            display flex
          .right-text
            color #666666
            p
              display flex
              align-items center
          .discount-box
            margin-left 16px
            font-size 26px
            color #00B893
            display flex
            height 40px
            padding 0 11px
            background #FFFFFF
            border 2px solid #00B893
            border-radius 20px
            align-items center
            justify-content center
        .balance-box
          font-size 28px
          display flex
          align-items center
          justify-content flex-end
          height 64px
          color #666666
  .protocol-box
    display flex
    align-items center
    padding 30px 34px
    font-size 28px
    background #f7f7f7
.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto
</style>
